<template>
  <div class="table-box">
    <div class="card mb10 pt0 pb0">
      <StatusFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
    </div>
    <ProTable
      ref="pTable"
      :columns="columns"
      :init-param="Object.assign(selectFilterValues, initParam)"
      :request-api="getTableList"
    >
      <template #title="scope">
        <div class="order-box">
          <div class="item-image">
            <img :src="getAvatorUrl(scope.row.userAvator)" alt="用户头像" />
          </div>
          <div class="item-info">
            <div class="item-title">{{ scope.row.title }}</div>
            <div class="item-sub-title">
              <span>{{ scope.row.typeName }}</span>
              |<span>{{ scope.row.priceAmt || "-" }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status === 6 ? 'danger' : ''" style="margin-left: 5px">
          {{ filterEnum(scope.row.status, jobStatusType) }}
        </el-tag>
      </template>
      <template #jobScore="scope">
        <el-rate v-model="scope.row.jobScore" disabled show-score text-color="#ff9900" score-template="{value}" />
      </template>
      <template #operation="scope">
        <el-button type="primary" text @click="handleAuditItem(scope.row)" v-if="scope.row.status === 6">审核</el-button>
        <el-button type="primary" text @click="handleOpenDialog(OptEnum.VIEW, scope.row)">详情</el-button>
      </template>
    </ProTable>
    <AuditJobDialog ref="auditDialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>

<script setup lang="ts">
import StatusFilter from "@/components/StatusFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { reactive, ref, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getDealerJobVoListApi, getDealerJobCntVoListApi } from "@/api/modules/dealer/auditjob";
import { OptEnum } from "@/biz/eenum/appEnum";
import defaultAvatar from "@/assets/images/davator.png";
import { filterEnum } from "@/utils";
import { jobStatusType } from "@/biz/datas/appData";
import AuditJobDialog from "./components/AuditJobDialog.vue";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({ jobStatus: 0 });

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  if (newParams.orderStatus) {
    // 全部，不传参数
    if (newParams.status == 0) {
      newParams.status = "";
    }
  }
  console.log("请求参数", newParams);
  // delete newParams.createTime;
  return getDealerJobVoListApi(newParams);
};
// 页面按钮权限
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  {
    prop: "title",
    label: "基本信息",
    search: { el: "input" }
  },
  {
    prop: "status",
    label: "状态",
    width: 100
  },
  {
    prop: "applyCnt",
    label: "申请数",
    width: 80
  },
  {
    prop: "viewCnt",
    label: "浏览数",
    width: 80
  },
  {
    prop: "jobScore",
    label: "评分",
    width: 220
  },
  {
    prop: "pubDate",
    label: "发布时间",
    width: 180
  },
  {
    prop: "userName",
    label: "发布人",
    width: 100
  },
  {
    prop: "applyUserName",
    label: "接单人",
    width: 100
  },
  {
    prop: "operation",
    width: 180,
    fixed: "right",
    label: "操作"
  }
];

const auditDialogRef = ref();
const handleAuditItem = (rowData?: { id: string }) => {
  let params = {
    optType: OptEnum.AUDIT,
    rowData: { ...rowData }
  };
  auditDialogRef.value.acceptParams(params);
};

// 打开 dialog(新增、查看、编辑)
// const dialogRef = ref();
const handleOpenDialog = async (optType: OptEnum, rowData?: { id: string }) => {
  console.log("打开详情页:", optType, rowData);
};

const selectFilterData = ref([
  {
    title: "",
    key: "status",
    options: [
      {
        label: "全部",
        value: 0,
        icon: "Odometer",
        total: 0
      },
      {
        label: "待审核",
        value: 6,
        icon: "Coordinate",
        total: 0
      },
      {
        label: "招聘中",
        value: 1,
        icon: "Edit",
        total: 0
      },
      {
        label: "进行中",
        value: 11,
        icon: "Timer",
        total: 0
      },
      {
        label: "已完成",
        value: 8,
        icon: "Finished",
        total: 0
      },
      {
        label: "异议中",
        value: 40,
        icon: "Phone",
        total: 0
      }
    ]
  }
]);
const selectFilterValues = reactive({ status: 6 });
const changeSelectFilter = (value: typeof selectFilterValues) => {
  // pTable.value.pageable.pageNum = 0;
  // console.log("参数的变化", value.status);
  selectFilterValues.status = value.status;
};

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

onMounted(() => {
  getDealerJobCntVoListApi({}).then(res => {
    // console.log("获取统计值 ", res);
    let data = res.data as unknown as any[];
    let { options } = selectFilterData.value[0];
    if (data && options) {
      // console.log("开始统计一下值", data, options);
      options.forEach(opt => {
        if (opt) {
          let ditem = data.find(d => {
            // 这要注意一下类型是否匹配
            return d.type == opt.value;
          });
          // console.log("每一条查询的数据", opt, "配置的数据", ditem);
          if (ditem) {
            opt.total = ditem.cnt;
          }
        }
      });

      // 汇总放在第一个total 中
      const total = data.reduce((sum, item) => sum + item.cnt, 0);
      // console.log("每种类型的统计值", total);
      options[0].total = total;
    }
  });
});
</script>

<style scoped lang="scss">
.order-box {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  // justify-content: center;

  .item-image {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: 5px;
    overflow: hidden;

    img {
      height: 60px;
      width: 60px;
    }
  }
  .item-info {
    .item-title {
      display: flex;
      flex: 1;
      font-size: 1.4rem;
      font-weight: 600;
      margin-left: 4px;
    }

    .item-sub-title {
      span {
        font-size: 0.8rem;
        font-weight: 300;
        margin: 5px;
      }
    }
  }
}
</style>
